<template>
	<view class="wrap">
		<scroll-view scroll-y="true" style="height:100%;width: 100%;" >
			<view  v-if="orderList.length" style="min-height:320px">
				<!-- <view class="list-title"><text>推荐线路</text> </view> -->
				<view class="list-main"  v-for="(item,index) in orderList" :key="index" @click.stop="goOrderDetail(item.id)">
				    <view class="display-flex-column">
						<view class="row-center tytop">
							<view class="type-desc">
								{{item.type_desc}}
							</view>
							<view class="add_time">
								下单时间：{{item.add_time}}
							</view>
							<view class="status_desc">
								{{item.status_desc}}
							</view>
						</view>
						<view class="row" style="margin-bottom: 15px;">
							<view class="display-flex-column">
		
								
								<view class="row-center">
									<view class="od-item ml-15">
										目的地：
									</view>
									<view class="od-item">
										{{item.destination}}
									</view>
								</view>
								<view class="row-center mt-15">
									<view class="od-item ml-15">
										出行人数：
									</view>
									<view class="od-item">
										{{item.people_sum}}人
									</view>
								</view>
								<view class="row-center mt-15">
									<view class="od-item ml-15">
										出行天数：
									</view>
									<view class="od-item">
										{{item.days}}天
									</view>
								</view>
							</view>
						</view>
						<view class="line"></view>
						<view class="row-center" style="margin: 14px 5px;">
							<view v-if="item.type==1" class="dan">
								出发：{{item.go_time}}
							</view>
							<view v-if="item.type==2" class="dan display-flex-column">
								<text>出发：{{item.go_time}}</text>
								<text>返程：{{item.back_time}}</text>
							</view>
							<view v-if="item.type==3" class="dan">
								用车天数：{{item.days}}天
							</view>
							<view class="detail-desc">
								查看详情
							</view>
						</view>
						
					</view>
				</view>
				<view style="height: 20px;">
				</view>
			</view>
			<view  v-else class="pt-100" >
				<emptyPage title="暂无定制游需求"></emptyPage>
			</view>
		
			
		</scroll-view>
	
		  
	</view>	
</template>

<script>
	import recommend from '@/components/recommend';
	import { mapGetters } from "vuex";
	import { configMap } from '@/utils';
		
	import {
		toLogin
	} from '@/libs/login.js';
	import { getUserDingzhiList } from "@/api/api.js"
   
	export default {
		computed: configMap({recommend_switch:0},mapGetters(['isLogin','viewColor'])),
		components:{
			recommend
		},
		data() {
			return {
				isAuto: true, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				orderList: [],
				hostProduct: []
				
			};
		},
		onShow() {
			if(this.isLogin){
				this.getList()
			} 
	
		},
		onLoad(option) {	
			if(!this.isLogin){
				toLogin()
			} else{
			}
			
		},
		onReady() {
		},
		methods:{
			
			
			getList(){
				uni.showLoading({
					title:'请稍后...'
				})
				getUserDingzhiList().then(res => {
					uni.hideLoading()
					this.orderList = res.data
				}).catch(err => {
					uni.hideLoading()
					return this.$util.Tips({
						title: err
					}); 
				})
			},
			goOrderDetail(id){
				uni.navigateTo({
					url:"/pages/bus/dingzhi/order_detail?id="+id
				})
			},
		
			
		},
		
		
	}
</script>

<style lang="scss" scoped>
	.list-main{
		position: relative;
		margin: 12rpx 24rpx;
		background-color: #fff;
		border-radius: 4px;
	}
	
	.line-sn {
		font-size: 15px;
		font-weight: 600;
		color: #000000;
		margin: 8px 10px;
	}
	.od-item{
		color: #888;
		font-size: 12px;
	}
	
	.ticket-item {
		margin-left: auto;
		margin-right: 20px;
	}
	.search-empty{
		position: fixed;
		top: 200px;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.type-desc{
		background-color: #007aff;
		color: #fff;
		padding: 1px 3px;
		border-radius: 3px;
	}
	.add_time{
		margin-left: 4px;
		font-size: 13px;
		color: #a7a7a7;
	}
	.tytop{
		margin: 8px 5px;
	}
	.status_desc{
		margin-left: auto;
		color: #ff4231;
		font-weight: 700;
	}
	.dan{
		margin-left: 4px;
		font-size: 13px;
		color: #a7a7a7;
	}
	.detail-desc{
		color: #007Aff;
		padding: 3px 4px;
		border-radius: 4px;
		border: 1px solid #007Aff;
		margin-left: auto;
	}
	
	.station_dot {
	    width: 17rpx;
	    height: 17rpx;
	    border-radius: 50%;
	    margin: 0 30rpx;
	}
	
	.station_dot_start {
	    background-color: rgb(142, 238, 25);
	}
	
	.station_dot_end {
	    background-color: rgb(243, 22, 22);
	}
	.line {
	    height: 2rpx;
	    background: #f0f0f0;
	}
	
	
</style>